<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    观察者
    1对多关系，多个观察者监听发布者
    添加观察者，移除观察者，通知观察者
    订阅者只管听，发布者只管做

    发布订阅者就是观察者的升级版

    jsdom事件就是观察者模式
    <script>
       // 创建观察者队列
        const queuedObservers = new Set();
        // 添加观察对象时需要执行的函数
        const observe = (fn) => queuedObservers.add(fn);
        // 监听对象
        const observable = (obj) => new Proxy(obj, { set });
        // 监听对象的 set 操作
        function set(target, key, value, receiver) {
            // 设置对象属性的值
            const result = Reflect.set(target, key, value, receiver);
            // 观察对象改变时，执行添加的函数
            queuedObservers.forEach((observer) => observer());
            return result;
        }

        const person = observable({
            name: "Zhange San",
            age: 47
        });

        function print() {
            console.log(`${person.name}, ${person.age}`);
        }

        observe(print);

        person.name = "Li Si";
// Li Si, 47


    </script>
</body>
</html>